<template>
  <div class="contact-page">
    <div class="page-header">
      <div class="header-left">
        <h1>联系信息</h1>
        <p>管理您的联系方式和社交媒体</p>
      </div>
      <el-button type="primary" :icon="Edit" @click="editing = true">
        编辑信息
      </el-button>
    </div>
    
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="never">
          <template #header>
            <span>联系方式</span>
          </template>
          
          <div class="contact-item">
            <el-icon class="contact-icon" color="#409eff">
              <Message />
            </el-icon>
            <div class="contact-info">
              <h4>邮箱</h4>
              <p>zhangsan@example.com</p>
            </div>
          </div>
          
          <div class="contact-item">
            <el-icon class="contact-icon" color="#67c23a">
              <Phone />
            </el-icon>
            <div class="contact-info">
              <h4>电话</h4>
              <p>138****8888</p>
            </div>
          </div>
          
          <div class="contact-item">
            <el-icon class="contact-icon" color="#e6a23c">
              <Location />
            </el-icon>
            <div class="contact-info">
              <h4>地址</h4>
              <p>北京市朝阳区</p>
            </div>
          </div>
          
          <div class="contact-item">
            <el-icon class="contact-icon" color="#f56c6c">
              <Clock />
            </el-icon>
            <div class="contact-info">
              <h4>工作时间</h4>
              <p>周一至周五 9:00-18:00</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card shadow="never">
          <template #header>
            <span>社交媒体</span>
          </template>
          
          <div class="social-item">
            <el-icon class="social-icon" color="#000">
              <Link />
            </el-icon>
            <div class="social-info">
              <h4>GitHub</h4>
              <p>github.com/zhangsan</p>
            </div>
          </div>
          
          <div class="social-item">
            <el-icon class="social-icon" color="#0077b5">
              <Link />
            </el-icon>
            <div class="social-info">
              <h4>LinkedIn</h4>
              <p>linkedin.com/in/zhangsan</p>
            </div>
          </div>
          
          <div class="social-item">
            <el-icon class="social-icon" color="#1da1f2">
              <Link />
            </el-icon>
            <div class="social-info">
              <h4>微博</h4>
              <p>@张三的技术博客</p>
            </div>
          </div>
          
          <div class="social-item">
            <el-icon class="social-icon" color="#ff6b35">
              <Link />
            </el-icon>
            <div class="social-info">
              <h4>个人博客</h4>
              <p>blog.zhangsan.dev</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 留言列表 -->
    <el-card shadow="never" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>最近留言</span>
          <el-button size="small" type="primary">查看全部</el-button>
        </div>
      </template>
      
      <div class="message-list">
        <div v-for="message in messages" :key="message.id" class="message-item">
          <div class="message-header">
            <span class="name">{{ message.name }}</span>
            <span class="email">{{ message.email }}</span>
            <span class="time">{{ message.time }}</span>
          </div>
          <p class="content">{{ message.content }}</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  Edit, 
  Message, 
  Phone, 
  Location, 
  Clock, 
  Link 
} from '@element-plus/icons-vue'

const editing = ref(false)

const messages = ref([
  {
    id: 1,
    name: '张三',
    email: 'zhang@example.com',
    time: '2024-03-15 10:30',
    content: '您好，我对您的项目很感兴趣，希望能进一步了解合作机会。'
  },
  {
    id: 2,
    name: '李四',
    email: 'li@example.com',
    time: '2024-03-14 16:20',
    content: '看到您的技能很全面，想请教一些前端开发的问题。'
  }
])
</script>

<style scoped>
.contact-page {
  padding: 0;
}

.contact-item,
.social-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.contact-item:last-child,
.social-item:last-child {
  border-bottom: none;
}

.contact-icon,
.social-icon {
  font-size: 24px;
}

.contact-info h4,
.social-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.contact-info p,
.social-info p {
  color: #606266;
  font-size: 14px;
  margin: 0;
}

.message-list {
  max-height: 300px;
  overflow-y: auto;
}

.message-item {
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.message-item:last-child {
  border-bottom: none;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.message-header .name {
  font-weight: 600;
  color: #303133;
}

.message-header .email {
  color: #409eff;
  font-size: 14px;
}

.message-header .time {
  color: #909399;
  font-size: 12px;
  margin-left: auto;
}

.message-content {
  color: #606266;
  line-height: 1.6;
  margin: 0;
}
</style>